<template>
  <div class="container">
    <header>
      <div class="title">商家信息</div>
    </header>
    <!-- logo -->
    <div class="business-logo">
      <img :src="business.businessImg" alt />
    </div>
    <!-- business-info -->
    <div class="business-info">
      <h1>{{business.businessName}}</h1>
      <p>&#165;{{business.starPrice}}起送 &#165;{{business.deliveryPrice}}配送</p>
      <p>{{business.businessExplain}}</p>
    </div>
    <!-- food-list -->
    <ul class="food-list">
      <li v-for="(food,index) in foodlist" :key="index">
        <div class="left">
          <img :src="food.foodImg" alt />
          <div class="food-info">
            <h3>{{food.foodName}}</h3>
            <p>{{food.foodExplain}}</p>
            <p>&#165;{{food.foodPrice}}</p>
          </div>
        </div>
        <div class="right">
          <div class="minus">
            <i class="fa fa-minus-circle" v-if="food.quantity>0" @click="minus(index)"></i>
          </div>
          <p class="number" v-if="food.quantity>0">{{food.quantity}}</p>
          <div class="plus">
            <i class="fa fa-plus-circle" @click="plus(index)"></i>
          </div>
        </div>
      </li>
    </ul>

    <!-- 撑住页脚处文档流 -->
    <div style="width: 100%;height :14vw;"></div>
    <!-- 页脚 -->
    <footer>
      <div class="left">
        <div class="cart-icon">
          <i class="fa fa-shopping-cart"></i>
          <div v-if="allQuantity>0">{{allQuantity}}</div>
        </div>
        <div class="total">
          <p>&#165;{{allPrice}}</p>
          <p>另需配送费3元</p>
        </div>
      </div>
      <div class="right" v-if="allPrice>=15" @click="toOrder">去结算</div>
      <div class="right" style="background-color: #535356;" v-else>&#165;15元起送</div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "BusinessInfo",
  data() {
    return {
      businessId: this.$route.query.businessId,
      business: {},
      foodlist: [],
      user:{}
      // cartlist:[]
    };
  },
  created() {
    //判断用户是否登录，不登陆角标都为0，登录才显示
    let user = this.$getSessionStorage("user");
    this.user = user
    //页面初始化请求后台，获取商家列表数据
    this.$axios
      .get("/BusinessController/getBusinessById?businessId=" + this.businessId)
      .then(response => {
        this.business = response.data;
      })
      .catch(error => {
        console.log(error);
      });
    //页面初始化请求后台，获取商家列表数据
    this.$axios
      .get("/FoodController/listFoodByBusinessId?businessId=" + this.businessId)
      .then(response => {
        this.foodlist = response.data;
        for (let i = 0; i < this.foodlist.length; i++) {
          this.foodlist[i].quantity = 0;
        }
        if (user != null) {
          //根据用户id获取购物车数据
          this.getcartlist(user);
        }
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    getcartlist(user) {
      this.$axios
        .get("/CartController/listCart?userId=" +user.userId + "&businessId=" +this.businessId)
        .then(response => {
          this.cartlist = response.data;
          for (let i = 0; i < this.foodlist.length; i++) {
            for (let j = 0; j < this.cartlist.length; j++) {
              if (this.foodlist[i].foodId == this.cartlist[j].food.foodId) {
                this.foodlist[i].quantity = this.cartlist[j].quantity;
              }
            }
          }
          this.foodlist.sort();
        })
        .catch(error => {
          console.log(error);
        });
    },
    minus(index){
        this.foodlist[index].quantity--;
        this.foodlist.sort();
        //调用后台接口
        if (this.foodlist[index].quantity > 0) {
            this.updateCart(index);
        }else{
            this.removeCart(index);
        }
    },
    plus(index){
        if (this.user == null) {
          //跳转到登录页
          this.$router.push('/login');
          return;
        }
        this.foodlist[index].quantity++;
        this.foodlist.sort();
        //调用后台接口
        if (this.foodlist[index].quantity == 1) {
            this.saveCart(index);
        }else{
            this.updateCart(index);
        }
    },
    updateCart(index){
        this.$axios
        .post("/CartController/updateCart",this.$qs.stringify({
            'businessId':this.businessId,
            'foodId':this.foodlist[index].foodId,
            'userId':this.user.userId,
            'quantity':this.foodlist[index].quantity
        }))
        .then(response => {
            if (response.data == 0) {
                alert("修改数量失败");
            };
        })
        .catch(error => {
          console.log(error);
        });
    },
    removeCart(index){
        this.$axios
        .post("/CartController/removeCart",this.$qs.stringify({
            'businessId':this.businessId,
            'foodId':this.foodlist[index].foodId,
            'userId':this.user.userId,
        }))
        .then(response => {
            if (response.data == 0) {
                alert("修改数量失败");
            };
        })
        .catch(error => {
          console.log(error);
        });
    },
    saveCart(index){
        this.$axios
        .post("/CartController/saveCart",this.$qs.stringify({
            'businessId':this.businessId,
            'foodId':this.foodlist[index].foodId,
            'userId':this.user.userId,
        }))
        .then(response => {
            if (response.data == 0) {
                alert("添加数量失败");
            };
        })
        .catch(error => {
          console.log(error);
        });
    },
    toOrder(){
      //跳转到确认订单页
      this.$router.push({path:'/order',query:{'businessId':this.businessId}})
    }
  },
  computed: {
    allQuantity() {
      let sum = 0;
      for (let i = 0; i < this.foodlist.length; i++) {
        sum += this.foodlist[i].quantity;
      }
      return sum;
    },
    allPrice() {
      let sum = 0;
      for (let i = 0; i < this.foodlist.length; i++) {
        sum += this.foodlist[i].quantity * this.foodlist[i].foodPrice;
      }
      return sum;
    }
  }
};
</script>

<style scoped>
/* *********************** header 部分 ***************************** */
.container header {
  width: 100%;
  height: 12vw;
}
.container header .title {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 4.8vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
/* *********************** logo 部分 ***************************** */
.container .business-logo {
  width: 100%;
  height: 35vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .business-logo img {
  width: 40vw;
  height: 30vw;
  border-radius: 5px;
}
/* *********************** info 部分 ***************************** */
.container .business-info {
  height: 20vw;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.container .business-info h1 {
  font-size: 5vw;
}
.container .business-info p {
  font-size: 3vw;
  color: #666;
  margin-top: 1vw;
}
/* *********************** food-list 部分 ***************************** */
.container .food-list {
  width: 100%;
}
.container .food-list li {
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container .food-list li .left {
  display: flex;
  align-items: center;
}
.container .food-list li .left img {
  width: 20vw;
  height: 20vw;
}
.container .food-list li .left .food-info {
  margin-left: 3vw;
}
.container .food-list li .left .food-info h3 {
  font-size: 3.8vw;
  color: #555;
}
.container .food-list li .left .food-info p {
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
}
.container .food-list li .right {
  width: 16vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container .food-list li .right i {
  font-size: 5.5vw;
  cursor: pointer;
}
.container .food-list li .right .fa-minus-circle {
  color: #999;
}
.container .food-list li .right .fa-plus-circle {
  color: #0097ff;
}
.container .food-list li .right p {
  font-size: 3.6vw;
  color: #333;
}
/* *********************** 页脚 部分 ***************************** */
.container footer {
  width: 100%;
  height: 14vw;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  color: white;
}
.container footer .left {
  height: 100%;
  height: 100%;
  flex: 2;
  display: flex;
  background-color: #505051;
}
.container footer .left .cart-icon {
  width: 16vw;
  height: 16vw;
  border-radius: 50%;
  border: 1.6vw solid #444;
  background-color: #3190e8;
  box-sizing: border-box;
  position: relative;
  font-size: 7vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -4vw;
  margin-left: 3vw;
}
.container footer .left .total p:first-of-type {
  font-size: 4.5vw;
  margin-top: 1vw;
}
.container footer .left .total p:last-of-type {
  font-size: 2.8vw;
  color: #aaa;
}
.container footer .left .cart-icon div {
  width: 5vw;
  height: 5vw;
  color: white;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 3.6vw;
  position: absolute;
  right: -1.5vw;
  top: -1.5vw;
}
.container footer .right {
  flex: 1;
  width: 100%;
  height: 100%;
  background-color: #38ca73;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 4.5vw;
  cursor: pointer;
}
</style>